<template>
	<view style="padding-bottom: 50rpx;">
		<!-- <view class="" :style="'height:'+statusBarHeight+'rpx'"></view> -->
		<u-navbar
			title="等待支付"
			:placeholder="true"
			:autoBack="true"
			@leftClick="leftClick"
			style="font-weight: bold;"
			bgColor="#F2F2F2"
		>
		<view class="navbarleft flex" slot='right'>
			<view class="flex">
				<u-icon name="clock"></u-icon>
				<u-count-down :time="30 * 60 * 1000" format="mm:ss"></u-count-down>
			</view>
		</view>
		</u-navbar>
		<view class="details">
			<view class="">{{type==1?'卖家':'我的'}}收款信息</view>
			<view class="paytype">
				<image src="../../static/wallet/backid.png" mode=""></image>
				<text>银行卡</text>
			</view>
			<view class="paydetail flex-between">
				<view class="">开户行</view>
				<view class="">中国银行</view>
			</view>
			<view class="paydetail flex-between">
				<view class="">姓名</view>
				<view class="">哈哈哈</view>
			</view>
			<view class="paydetail flex-between">
				<view class="">银行卡号</view>
				<view class="flex">
					<text>6222611111111221111</text>
					<image src="../../static/wallet/copy.png" mode=""></image> 
				</view>
			</view>
			<view class="payline"></view>
			<view class="payname flex">
				<image src="../../static/wallet/wechat.png" mode=""></image>
				<view class="">微信支付</view>
			</view>
			<view class="payqr flex-between">
				<view class="">收款二维码</view>
				<view class="qrcode">
					<uqrcode ref="uqrcode" canvas-id="qrcode" size="60" value="https://uqrcode.cn/doc" :options="{ margin: 0 }"></uqrcode>
				</view>
			</view>
			<view class="payline"></view>
			<view class="payname flex">
				<image src="../../static/wallet/Alipay.png" mode=""></image>
				<view class="">支付宝</view>
			</view>
			<view class="payqr flex-between">
				<view class="">收款二维码</view>
				<view class="qrcode">
					<uqrcode ref="uqrcode" canvas-id="qrcode" size="60" value="https://uqrcode.cn/doc" :options="{ margin: 0 }"></uqrcode>
				</view>
			</view>
			<view class="paydetail flex-between">
				<view class="">支付宝账号</view>
				<view class="flex">
					<text>6222611111111221111</text>
					<image src="../../static/wallet/copy.png" mode=""></image> 
				</view>
			</view>
		</view>
		<view class="details paybottom">
			<view class="name">订单信息</view>
			<view class="paydetail flex-between bottom">
				<view class="">{{type==1?'购买':'出售'}}火豆</view>
				<view class="">9,000.00</view>
			</view>
			<view class="paydetail flex-between bottom">
				<view class="">应付</view>
				<view class="">9,000.00</view>
			</view>
			<view class="paydetail flex-between bottom">
				<view class="">订单号</view>
				<view class="">D123456789</view>
			</view>
		</view>
		<view class="btnsub" @click="$fun.jump(`./orderstate`)">
			我已支付
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight:0,
				type:1
			}
		},
		onLoad(option) {
			this.type=option.type
		},
		onShow() {
			const phoneInfo = uni.getSystemInfoSync(); // 获取手机系统信息
			this.statusBarHeight = phoneInfo.statusBarHeight
		},
		methods: {
			leftClick(){
				
			}
		}
	}
</script>

<style lang="scss">
.details{
	width: 690rpx;
	height: 764rpx;
	background: #FFFFFF;
	border-radius: 24rpx;
	padding: 24rpx 30rpx;
	margin:30rpx auto;
	.paytype{
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
		margin: 20rpx 0;
		image{
			width: 23rpx;
			height: 18rpx;
			margin-right: 10rpx;
		}
	}
	.paydetail{
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 20rpx;
		image{
			width: 32rpx;
			height: 32rpx;
			margin-left: 10rpx;
		}
	}
	.payline{
		width: 630rpx;
		height: 2rpx;
		background: #EAEAEA;
	}
	.payname{
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
		margin-top: 30rpx;
		image{
			width: 24rpx;
			height: 24rpx;
			margin-right: 10rpx;
		}
	}
	.payqr{
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		margin-top: -20rpx;
		margin-bottom: 30rpx;
		.qrcode{
			width: 120rpx;
			height: 120rpx;
		}
		image{
			width: 100%;
			height: 100%;
		}
	}
}
.paybottom{
	height: 296rpx;
	.name{
		font-weight: 600;
		margin-bottom: 30rpx;
	}
	.bottom{
		margin-bottom: 30rpx;
	}
}
.btnsub{
	width: 690rpx;
	height: 88rpx;
	line-height: 80rpx;
	text-align: center;
	background: #9999FF;
	border-radius: 44rpx;
	font-weight: 500;
	font-size: 32rpx;
	color: #FFFFFF;
	margin: 110rpx auto;
}
</style>
